<template>
    <div>
      <h1>Formily Form with Component Communication</h1>
      <FormProvider :form="form">
        <!-- 父传子：传递表单实例给子组件 -->
        <ChildComponent />
        <!-- 兄弟组件 -->
        <SiblingComponentA />
        <SiblingComponentB />
      </FormProvider>
      <button @click="submitForm">Submit Form</button>
      <p>Form Values: {{ formValues }}</p>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { createForm } from '@formily/core';
  import { FormProvider } from '@formily/vue';
  import ChildComponent from './ChildComponent.vue';
  import SiblingComponentA from './SiblingComponentA.vue';
  import SiblingComponentB from './SiblingComponentB.vue';
  
  // 创建表单实例
  const form = ref(createForm());
  
  // 存储表单值
  const formValues = ref({});
  
  // 提交表单的方法
  const submitForm = () => {
    formValues.value = form.value.values;
    console.log('Form values:', formValues.value);
  };
  </script>
  
  <style scoped>
  button {
    margin-top: 10px;
  }
  </style>